<template>
  <Window />
  <div class="page-login">
    <div class="left">
      <el-scrollbar>
        <div class="list">
          <div class="user flash admin" :class="{'select': !tab }" @click="onTab(false)">
            <i class="iconfont icon-guanliyuan" />
            <div class="name wrap">{{ lang.t('page.index.admin') }}</div>
          </div>
          <div class="user flash" v-for="item in list" :key="item" :class="{'select': item == account }" @click="onTab(item)">
            <i class="iconfont icon-account" />
            <div class="name wrap">{{ item }}</div>
          </div>
          <div class="user flash" v-if="checkoutInfo" :class="{'select': account == null }" @click="onTab(null)">
            <i class="iconfont icon-add-select add" />
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="box">
      <img class="logo" src="@/assets/logo.png" />
      <User v-if="!tab" />
      <Account v-else :checkout="checkoutInfo" :account="account" />
      <div class="version">Version: v{{ version }}</div>
      <div class="zoom">
        <el-slider v-model="zoom" :step="10" :min="50" :max="200" @change="onZoom" />
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import app from '@/app'
import { checkout } from '@/api/manage'

import Window from '@/components/window'
import User from './login/user'
import Account from './login/account'

export default {
  components: {
    Window,
    User,
    Account
  },
  setup() {
    // 用户列表
    const list = ref([])
    const account = ref('')

    // 切换登陆 
    const tab = ref(false)

    // 收银台信息
    const checkoutInfo = ref(false)

    // 版本号
    const version = ref('')

    // 切换登陆角色
    const onTab = data => {
      tab.value = data === false ? false : true
      account.value = data
    }

    // 请求收银台
    app.ui.loading()
    checkout(app.tokenCheckout()).then(res => {
      // 收银台信息
      checkoutInfo.value = res
      // 常用收银员
      list.value = app.accountList()
      // 选中一个
      onTab(list.value.length > 0 ? list.value[0] : null)
    }).catch(() => {
      // 清空收银台token
      //  app.tokenCheckout(false)
    }).finally(() => {
      app.ui.loadingClose()
      // 加载版本号
      version.value = app.window.version()
    })

    // 缩放
    const zoom = ref(parseFloat(app.storage.get('zoom') ?? 100))
    const onZoom = () => {
      app.window.setZoom(zoom.value / 100)
      app.storage.set('zoom', zoom.value)
    }

    onZoom()

    return {
      app,
      lang: app.lang,
      list,
      version,
      account,
      tab,
      checkoutInfo,

      onTab,

      zoom,
      onZoom
    }
  }
}
</script>
<style>
  #app{
    background: #fff !important;
  }
</style>